@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: black;
}

.wrap {
	width: 700px;
	margin: 0 auto;
}

.cow {
	padding: 50px 0;
}

.cb:after {
	content: '';
	display: block;
	clear: both;
}

.loading {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 100px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .2);
}

.loading div {
	position: relative;
}

.loading:last-child {
	margin-right: 0;
}

.loader1 {
	margin: 25px auto;
	width: 50px;
	height: 50px;
	border: 4px solid #fff;
	border-radius: 50%;
}

.loader1:before {
	position: absolute;
	content: '';
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: #FFFFFF;
	top: 19px;
	left: 19px;
	animation: rotate 3s linear infinite;
	transform-origin: 2px 2px;
}

.loader1:after {
	position: absolute;
	content: '';
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: #FFFFFF;
	top: 19px;
	left: 19px;
	animation: rotate 18s linear infinite;
	transform-origin: 2px 2px;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.loader2 {
	margin: 45px 30px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	animation: loader2 2.5s linear infinite;
}

@keyframes loader2 {
	0% {
		background-color: rgba(255, 255, 255, .1);
	}
	12.5% {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 15px 0 rgba(255, 255, 255, .1), 30px 0 rgba(255, 255, 255, .1);
	}
	25% {
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 15px 0 rgba(255, 255, 255, 1), 30px 0 rgba(255, 255, 255, .1);
	}
	37.5% {
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 15px 0 rgba(255, 255, 255, .1), 30px 0 rgba(255, 255, 255, 1);
	}
	50% {
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 15px 0 rgba(255, 255, 255, 1), 30px 0 rgba(255, 255, 255, .1);
	}
	62.5% {
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 15px 0 rgba(255, 255, 255, .1), 30px 0 rgba(255, 255, 255, .1);
	}
	75% {
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 15px 0 rgba(255, 255, 255, 1), 30px 0 rgba(255, 255, 255, .1);
	}
	87.5% {
		background-color: rgba(255, 255, 255, .1);
		box-shadow: 15px 0 rgba(255, 255, 255, .1), 30px 0 rgba(255, 255, 255, 1);
	}
	100% {
		background-color: rgba(255, 255, 255, .1);
	}
}

.loader3 {
	width: 100px;
	height: 100px;
}

.loader3:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	top: 16px;
	left: 33px;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	animation: move .5s infinite alternate;
}

@keyframes move {
	from {}
	to {
		transform: translateY(5px) rotate(-45deg);
	}
}

.loader3:after {
	content: '';
	position: absolute;
	width: 35px;
	height: 10px;
	border-radius: 50%;
	top: 59px;
	left: 32px;
	background: rgba(255, 255, 255, .2);
}

.loader4 {
	margin: 25px auto;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 100%;
	overflow: hidden;
}

.loader4:before {
	content: '';
	position: absolute;
	width: 4px;
	height: 20px;
	top: 14px;
	left: 21px;
	background: #fff;
	border-radius: 2px;
	animation: rotate2 2s linear infinite alternate;
	transform-origin: bottom;
}

@keyframes rotate2 {
	from {
		transform: rotate(75deg);
	}
	to {
		transform: rotate(-75deg);
	}
}

.loader4:after {
	content: '';
	position: absolute;
	width: 50px;
	height: 20px;
	bottom: -7px;
	left: -2px;
	background: #fff;
	z-index: -1;
}

.loader5 {
	margin: 42px auto;
	width: 30px;
	height: 16px;
	border: 1px solid #fff;
	border-radius: 3px;
	animation: battery 6s linear infinite;
}

.loader5:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 6px;
	top: 4px;
	right: -4px;
	background: #fff;
}

@keyframes battery {
	from {
		box-shadow: inset 0 0 #fff;
	}
	to {
		box-shadow: inset 30px 0 #fff;
	}
}

.loader6 {
	margin: 30px;
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	border-radius: 100%;
	animation: magnifier 1s infinite alternate;
}

.loader6:after {
	content: '';
	position: absolute;
	width: 4px;
	height: 18px;
	bottom: -14px;
	right: -8px;
	background: #fff;
	border-radius: 2px;
	transform: rotate(-45deg);
}

.loader6:before {
	content: 'me';
	position: absolute;
	top: 4px;
	left: 2px;
	font-size: 10px;
	color: #fff;
}

@keyframes magnifier {
	from {}
	to {
		transform: scale(1.2);
	}
}

.loader7 {
	margin: 25px auto;
	width: 50px;
	height: 50px;
	border: 2px solid #fff;
	border-radius: 100%;
	animation: rotate3 1.5s ease infinite;
}

.loader7:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 14px;
	background: #fff;
	border-radius: 100%;
}

@keyframes rotate3 {
	from {}
	to {
		transform: rotate(360deg);
	}
}

.loader8 {
	margin: 45px auto;
	width: 40px;
	height: 10px;
	animation: trans 3s linear infinite;
}

.loader8:before {
	content: '';
	position: absolute;
	width: 4px;
	height: 10px;
	background: rgba(255,255,255,1);
	animation: key 3s linear infinite;
}


@keyframes key{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
    }
	}

@keyframes trans {
	from {
		box-shadow: inset 40px 0 rgba(255, 255, 255, 1);
	}
	to {
		box-shadow: inset 0 0 rgba(255, 255, 255, 1);
	}
}

.loader9 {
	margin: 40px 25px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 100%;
	box-shadow: 30px 0 #fff;
}

.loader9:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 8px;
	left: 0;
	border-radius: 100%;
	background: #000;
	box-shadow: 30px 0 #000;
	animation: eyes 1s linear infinite alternate;
}

@keyframes eyes {
	from {}
	to {
		transform: translateX(10px);
	}
}

.loader10 {
	margin: 40px auto;
	width: 24px;
	height: 28px;
	border: 1px solid #fff;
	border-radius: 0 0 5px 5px;
}

.loader10:after {
	content: '';
	position: absolute;
	top: 2px;
	right: -8px;
	width: 6px;
	height: 14px;
	border: 1px solid #fff;
	border-left: none;
	border-radius: 0 100% 100% 0 / 100%;
}

.loader10:before {
	content: '';
	position: absolute;
	width: 1px;
	height: 6px;
	top: -10px;
	left: 6px;
	background: #fff;
	box-shadow: 5px 0 #fff, 10px 0 #fff, 5px -5px #fff;
	animation: cap 1s linear infinite alternate;
}

@keyframes cap {
	from {}
	to {
		height: 0;
	}
}

.loader11 {
	margin: 35px auto;
	width: 30px;
	height: 30px;
	border: 1px solid #fff;
	animation: box 5s linear infinite;
}

.loader11:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	top: -10px;
	left: -10px;
	background: #fff;
	animation: rotate4 1s linear infinite;
}

@keyframes box {
	from {
		box-shadow: inset 0 0 #fff;
	}
	to {
		box-shadow: inset 0 -30px #fff;
	}
}

@keyframes rotate4 {
	0% {}
	25% {
		transform: translateX(43px);
	}
	50% {
		transform: translateX(43px) translateY(43px);
	}
	75% {
		transform: translateY(43px);
	}
	100% {}
}

.loader12 {
	margin: 45px auto;
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 1);
	border-radius: 100%;
	box-shadow: -15px -15px rgba(255, 255, 255, 1);
	animation: rotate5 1s ease-in-out infinite alternate;
}

@keyframes rotate5 {
	from {}
	to {
		background: rgba(255, 255, 255, .1);
		box-shadow: -15px -15px rgba(255, 255, 255, .2);
		transform: scale(.5) rotate(330deg);
	}
}